<template>
<div>
    <div class="container">
      <!-- 头部导航 -->
      <home-head>
        <div slot="red">
          <div class="luobo_background"></div>
        </div>
      </home-head>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text='刷新成功'>
      <!-- 轮播 -->
      <div class="lunbo">
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="red">
          <van-swipe-item v-for = "item in banners" :key="item.id">
            <img :src="item.picUrl" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 分类 -->
      <van-swipe class="my-swipe"  indicator-color="red">
        <van-swipe-item>
          <van-grid :column-num="5" icon-size='40'>
            <van-grid-item :icon="item.icon" :text="item.name" v-for="item in cates" :key="item.id" :to="{ path:'/itemlist', query:{cateid: item.id, name:item.name}}" />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :column-num="5" icon-size='40'>
            <van-grid-item :icon="item.icon" :text="item.name" v-for="item in cates" :key="item.id" />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
      <!-- JD秒杀 -->
      <div>
        <div class="jdmiaosha">
            <span class="font_12 ">京东秒杀</span>
            <span class="font_12 red padding_10">18</span>
            <van-count-down time='6000000'>
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
            <span class="font_12 red ">
              更多秒杀
              <van-icon name="add" />
            </span>
        </div>
        <div>
          <miao-goods :goods="cates"/>
        </div>
      </div>
      <!-- 推荐商品 -->
      <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="我也是有底线的"
          @load="onLoad"
        >
           <div>
            <item :items="items" @godetail="fn"/>
          </div>
    </van-list>
    </van-pull-refresh>
    </div>
  <tabbar/>
</div>
</template>

<script>
import MiaoGoods from './components/MiaoGoods.vue'
import Item from './components/Item.vue'
import Tabbar from '../../components/Tabbar.vue'
import { fetchHomeBanner, fetchCates, fetchItems } from '_api'
import HomeHead from './components/HomeHead.vue'
// import Loading from '../../plugins/Loading/Loading.vue'

export default {
  name: 'Home',
  components: { HomeHead, MiaoGoods, Item, Tabbar },
  data () {
    return {
      banners: [],
      cates: [],
      items: [],
      isLoading: false,
      page: 1,
      pageSize: 6,
      loading: false,
      finished: false
    }
  },
  created () {
    this.fetchHomeBanner()
    this.fetchCates()
  },
  methods: {
    // 去详情页
    fn (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 上拉加载
    onLoad () {
      this.fetchItems()
      this.page++
    },
    // 下拉刷新
    onRefresh () {
      this.finished = false
      this.page = 1
      this.items = []
      this.fetchItems()
      this.page++
    },
    // 获取推荐商品
    fetchItems () {
      fetchItems({
        categoryId: '72399',
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.code === 700) {
          this.finished = true
        }
        this.loading = false
        this.isLoading = false
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    },
    // 获取轮播图
    fetchHomeBanner () {
      fetchHomeBanner().then(res => {
        this.banners = res.data.data
      })
    },
    // 获取分类
    fetchCates () {
      fetchCates({
        categoryId: '72399'
      }).then(res => {
        this.cates = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  margin-bottom: 50px;
}
.luobo_background{
  width: 100%;
  position: absolute;
  // z-index: -999;
  left: 0;

  background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
  height: 1rem;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;

}
.lunbo{
  width: 100%;
  height: 1.8rem;
  margin-top: .4rem;
  padding: 10px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  /deep/ .van-swipe__indicators{
    bottom: .4rem;
    // color: black;
    .van-swipe__indicator{
      background-color: #191b1e;
    }
  }
}
/deep/.van-grid-item__content{
  background-color: transparent;
  padding: 6px 8px;
}
/deep/.van-grid-item__content::after{
  border-width: 0;
  background-color: transparent;
}
/deep/ .van-swipe__indicators{
    .van-swipe__indicator{
      background-color: #191b1e;
    }
  }
/deep/.van-swipe__indicators{
  bottom: 0;
}
/deep/.van-icon__image{
  border-radius: 22px;
}

.jdmiaosha{
  display: flex;
  padding: 0 .2rem;
  // justify-content: space-around;
  align-items: center;
  height: 34px;
  background: url(../../assets/img/miaosha.png) no-repeat;
  background-size: contain;
  span{}
  .font_12{
    font-size: 14px;
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  .van-count-down{
    text-align: left;
    flex: 1;
    padding-left: 10px;
    .block{
      width: 18px;
      border-radius: 5px;
    }
  }
}
</style>
